{extend name="iframe" /}
{block name="css"}
{css href="__CSS__/companyVideo.css" /}
{/block}
{block name="body"}
<!-- 主要内容 开始 -->
<div class="main">
        <!-- 视频区域 -->
    <div class="video-area">
        <div class="container nopadding">
            <div class="left jq_btnChangeVideo" data-flag="pre">
                <img class="icon" src="__IMG__/icon_left.png" alt="">
            </div>
            <div class="video-wrapper">
                <video controls id="vvideo" x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint" class="vvideo" src="{$lists.0.video|default=''}" poster="" autoplay></video>
                <div class="icon-play" id="btnPlay">
                    <img class="play" src="__IMG__/icon_play.png" alt="">
                    <img class="play-hover" src="__IMG__/icon_play_hover.png" alt="">
                </div>
            </div>
            <div class="right jq_btnChangeVideo" data-flag="next">
                <img class="icon" src="__IMG__/icon_right.png" alt="">
            </div>
        </div>
    </div>
    <!-- 中部新闻介绍 -->
    <div class="desc">
        <div class="container nopadding">
            <p class="title jq_title">{$lists.0.name|default=''}</p>
            <p class="txt jq_introduction"> {$lists.0.describe|default=''}</p>
        </div>
    </div>
    <p hidden id="url" data-url="companyVideo.html"></p>
    <!-- 视频列表 -->
    <div class="video-list">
        <div class="container nopadding">
            <div class="filter-bar">
                <p hidden data-url="companyvideo.html" id="url"></p>
                <!--左边下拉选择-->
                {volist name="$group" id="v" empty="$empty"}
                    <a class="link {if $Request.param.c_name eq $v}active{else}{if $Request.param.c_name eq '' && $i ==1}active{/if}{/if}" href="companyVideo.html?c_name={$v}">{$v}</a>
                    {if $i < count($group)}<span class="circle"></span>{/if}
                {/volist}
            </div>
            <div class="v-list">
                <!-- 需要替换data-vsrc -->
                {volist name="$lists" id="v" empty="$empty"}
                <div class="video-item" data-vsrc="{$v.video|default=''}" data-title="{$v.name|default=''}" data-introduction="{$v.describe|default=''}">
                    <div class="v">
                        <img src="{$v.img|default=''}" alt="">
                        <img class="icon-play" src="__IMG__/icon_play.png" alt="">
                        <div class="m-txt">
                            <p class="m-title">{$v.name|default=''}</p>
                            <span class="t">点击观看视频 <img class="small-icon" src="__IMG__/icon_play_small.png" alt=""></span>
                        </div>
                    </div>
                    <div class="mask"></div>
                    <p class="txt">{$v.name|default=''}</p>
                </div>
                {/volist}
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <div class="c-pagination"></div>
    </div>
<!-- 主要内容 结束 -->
{/block}
{block name="js"}
<script type="text/javascript">

    function c_name(){
        var c_name = $('#c_name option:selected').attr('value');
        var url = $('#url').attr('data-url');
        var new_url =url+'?c_name='+c_name;
        $(window).attr('location',new_url);
    }



    $(function() {
        var videoIndex = 0;
        var video = document.querySelector("video");
        console.log(video);
        // 视频播放按钮
        $('#btnPlay').on('click', function(e) {
            e.stopPropagation();
            console.log('我要播放啦');
            if(video.paused) {
                video.play();
                $(this).css('display', 'none');
            } else {
                video.pause();
            }
            return false;
        })

        var vList = $('.v-list .video-item')
        console.log(vList)
        // 切换视频
        $('.jq_btnChangeVideo').on('click', function(e) {

            e.stopPropagation();
            var flag = $(this).data('flag');
            if (flag === 'pre') {
                console.log('<------pre------>');
                // 上一首
                if (videoIndex === 0) {
                    console.log('<------已经是第一首------>')
                    return
                }
                videoIndex --;
                console.log(videoIndex, '<------videoIndex------>')
                var vSrc = $(vList[videoIndex]).data('vsrc')
                var title = $(vList[videoIndex]).data('title');
                var introduction = $(vList[videoIndex]).data('introduction');
                console.log(vSrc)
                // 设置video src
                $(video).attr('src', vSrc);
                $('.jq_title').html(title);
                $('.jq_introduction').html(introduction);
            } else if(flag === 'next') {
                console.log('<------next------>');
                // 下一首
                if (videoIndex === vList.length - 1) {
                    console.log('<------已经是最后一首------>')
                    return;
                }
                videoIndex ++;
                console.log(videoIndex, '<------videoIndex------>')
                var vSrc = $(vList[videoIndex]).data('vsrc')
                var title = $(vList[videoIndex]).data('title');
                var introduction = $(vList[videoIndex]).data('introduction');
                console.log(vSrc)
                // 设置video src
                $(video).attr('src', vSrc);
                $('.jq_title').html(title);
                $('.jq_introduction').html(introduction);
            }
        })

        // 点击视频
        vList.on('click', function(e) {
            e.stopPropagation();
            var vIndex = vList.index(this);
            var vSrc = $(this).data('vsrc');
            var title = $(this).data('title');
            var introduction = $(this).data('introduction');
            console.log(vIndex, '<-----vindex------>')
            videoIndex = vIndex;
            console.log(videoIndex, '<------videoIndex------>')
            $(video).attr('src', vSrc)
            video.play();
            $('html,body').animate({
                    scrollTop: 0
                }, 10);
            $('#btnPlay').css('display', 'none');
            $('.jq_title').html(title);
            $('.jq_introduction').html(introduction);
        })
    })
</script>
{/block}